<template>
	<xn-form-container
		:title="'人工质检详情'"
		:width="'70%'"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<div class="call-autio">
			<WaveSurferAudio :audio-url="callRecord.fileUrl" @timeUpdate="handleTimeUpdate"></WaveSurferAudio>
		</div>
		<div class="call-info">
			<a-card title="话单详情">
				<a-descriptions size="small" layout="horizontal" bordered class="des-details">
					<a-descriptions-item label="通话序列号">{{ callRecord.callId }}</a-descriptions-item>
					<a-descriptions-item label="被叫">{{ callRecord.callee }}</a-descriptions-item>
					<a-descriptions-item label="通话类型">{{ callRecord.callTypeName }}</a-descriptions-item>
					<a-descriptions-item label="所属公司">{{ callRecord.companyName }}</a-descriptions-item>
					<a-descriptions-item label="坐席账号">{{ callRecord.agentNum }}</a-descriptions-item>
					<a-descriptions-item label="坐席姓名">{{ callRecord.userName }}</a-descriptions-item>
				</a-descriptions>
			</a-card>
			<a-card title="质检备注">
				<p v-if="callRecord.remark">{{ callRecord.remark }}</p>
				<p v-else class="empty-remark">
					<i class="iconfont icon-queshengye_zanwushuju"></i>
					<span>暂无备注</span>
				</p>
			</a-card>
		</div>
		<div class="call-chat">
			<a-spin :spinning="chatLoading">
				<ChatWindow
					ref="chatWindowRef"
					:current-user="currentUser"
					:target-user="targetUser"
					:messages="messages"
					:curMsgId="curMsgId"
				/>
			</a-spin>
		</div>
	</xn-form-container>
</template>

<script setup name="CheckDetails">
	import voiceTextApi from '@/api/qc/voice/text/voiceTextApi'
	import tool from '@/utils/tool'
	//仿微信聊天记录
	import { ref } from 'vue'
	import WaveSurferAudio from '@/components/AudioView/waveSurferAudio.vue'
	import ChatWindow from '@/views/qc/voice/dynamicChat/ChatWindow.vue'
	// ===========================================DATA======================================================
	//测试对话数据
	const testData = [
		{
			id: '1882009188190583188',
			callId: '20250603133826996393400471',
			sessionNo: 1,
			speakerRole: 2,
			content: '你好',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:38:52'
		},
		{
			id: '1882009188190583189',
			callId: '20250603133826996393400471',
			sessionNo: 2,
			speakerRole: 2,
			content: '你好',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:38:53'
		},
		{
			id: '1882009188190583190',
			callId: '20250603133826996393400471',
			sessionNo: 3,
			speakerRole: 2,
			content: '您是这个',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:38:55'
		},
		{
			id: '1882009188190583191',
			callId: '20250603133826996393400471',
			sessionNo: 4,
			speakerRole: 2,
			content: '翟林峰是吗',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:38:57'
		},
		{
			id: '1882009188190583192',
			callId: '20250603133826996393400471',
			sessionNo: 1,
			speakerRole: 1,
			content: '我要唱',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:38:59'
		},
		{
			id: '1882009188190583193',
			callId: '20250603133826996393400471',
			sessionNo: 5,
			speakerRole: 2,
			content: '我这边天天不会啊',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:01'
		},
		{
			id: '1882009188190583194',
			callId: '20250603133826996393400471',
			sessionNo: 6,
			speakerRole: 2,
			content: '还得当',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:02'
		},
		{
			id: '1882009188190583195',
			callId: '20250603133826996393400471',
			sessionNo: 7,
			speakerRole: 2,
			content: '啊这边还有小姐姐医吗这边正在关于您很多想买茶想先想问一下',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:08'
		},
		{
			id: '1882009188190583196',
			callId: '20250603133826996393400471',
			sessionNo: 3,
			speakerRole: 1,
			content: '你知道我们多少我想请问你',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:16'
		},
		{
			id: '1882009188190583198',
			callId: '20250603133826996393400471',
			sessionNo: 8,
			speakerRole: 2,
			content: '但是就是你你的情况呢我们现在了解',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:21'
		},
		{
			id: '1882009188190583201',
			callId: '20250603133826996393400471',
			sessionNo: 9,
			speakerRole: 2,
			content: '那目前是处在合同违约之外的时间对不对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:24'
		},
		{
			id: '1882009188190583203',
			callId: '20250603133826996393400471',
			sessionNo: 4,
			speakerRole: 1,
			content: '是吧你十分钟吃饭你给我打电话',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:30'
		},
		{
			id: '1882009188190583206',
			callId: '20250603133826996393400471',
			sessionNo: 5,
			speakerRole: 1,
			content: '反正是几个有几个多生的',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:32'
		},
		{
			id: '1882009188190583208',
			callId: '20250603133826996393400471',
			sessionNo: 10,
			speakerRole: 2,
			content: '但是你有',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:35'
		},
		{
			id: '1882009188190583211',
			callId: '20250603133826996393400471',
			sessionNo: 6,
			speakerRole: 1,
			content: '我叫什么我们这边的快递东西',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:38'
		},
		{
			id: '1882009188190583212',
			callId: '20250603133826996393400471',
			sessionNo: 13,
			speakerRole: 2,
			content: '第2名',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:41'
		},
		{
			id: '1882009188190583213',
			callId: '20250603133826996393400471',
			sessionNo: 14,
			speakerRole: 2,
			content: '啊对不对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:43'
		},
		{
			id: '1882009188190583215',
			callId: '20250603133826996393400471',
			sessionNo: 10,
			speakerRole: 1,
			content: '我之前就是没有',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:47'
		},
		{
			id: '1882009188190583216',
			callId: '20250603133826996393400471',
			sessionNo: 11,
			speakerRole: 1,
			content: '那钱我怎么调整我自己',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:49'
		},
		{
			id: '1882009188190583219',
			callId: '20250603133826996393400471',
			sessionNo: 12,
			speakerRole: 1,
			content: '爸爸是小学',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:52'
		},
		{
			id: '1882009188190583220',
			callId: '20250603133826996393400471',
			sessionNo: 15,
			speakerRole: 2,
			content: '你申请了没有吗',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:54'
		},
		{
			id: '1882009188190583225',
			callId: '20250603133826996393400471',
			sessionNo: 13,
			speakerRole: 1,
			content: '我我我我解决我会现在就结婚自己解决了',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:39:58'
		},
		{
			id: '1882009188190583238',
			callId: '20250603133826996393400471',
			sessionNo: 15,
			speakerRole: 1,
			content: '有多少',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:10'
		},
		{
			id: '1882009188190583239',
			callId: '20250603133826996393400471',
			sessionNo: 17,
			speakerRole: 1,
			content: '你们你解释一下',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:15'
		},
		{
			id: '1882009188190583240',
			callId: '20250603133826996393400471',
			sessionNo: 18,
			speakerRole: 1,
			content: '就是你们你没有没办法',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:17'
		},
		{
			id: '1882009188190583243',
			callId: '20250603133826996393400471',
			sessionNo: 19,
			speakerRole: 1,
			content: '对我我跟你解释说比我意思是',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:22'
		},
		{
			id: '1882009188190583244',
			callId: '20250603133826996393400471',
			sessionNo: 20,
			speakerRole: 1,
			content: '你的我我就喜欢你那个',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:24'
		},
		{
			id: '1882009188190583247',
			callId: '20250603133826996393400471',
			sessionNo: 18,
			speakerRole: 2,
			content: '上海那个',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:29'
		},
		{
			id: '1882009188190583248',
			callId: '20250603133826996393400471',
			sessionNo: 22,
			speakerRole: 1,
			content: '爸爸也是2788的',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:32'
		},
		{
			id: '1882009188190583250',
			callId: '20250603133826996393400471',
			sessionNo: 19,
			speakerRole: 2,
			content: '是啊很一给女人的申请的就是嗯',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:36'
		},
		{
			id: '1882009188190583251',
			callId: '20250603133826996393400471',
			sessionNo: 20,
			speakerRole: 2,
			content: '情况就这么情况你现在好像了对不对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:39'
		},
		{
			id: '1882009188190583253',
			callId: '20250603133826996393400471',
			sessionNo: 23,
			speakerRole: 1,
			content: '对什么是这么什么唯一骗你们啊对对对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:42'
		},
		{
			id: '1882009188190583257',
			callId: '20250603133826996393400471',
			sessionNo: 23,
			speakerRole: 2,
			content: '每月节约时间外毕竟您是主动违约的人家不送不是人家给你每月',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:47'
		},
		{
			id: '1882009188190583260',
			callId: '20250603133826996393400471',
			sessionNo: 24,
			speakerRole: 1,
			content: '真的不是我我我真不是这个我没有这个',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:50'
		},
		{
			id: '1882009188190583263',
			callId: '20250603133826996393400471',
			sessionNo: 27,
			speakerRole: 1,
			content: '我那姐姐还没上班',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:40:56'
		},
		{
			id: '1882009188190583268',
			callId: '20250603133826996393400471',
			sessionNo: 28,
			speakerRole: 1,
			content: '我们是在里么',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:01'
		},
		{
			id: '1882009188190583269',
			callId: '20250603133826996393400471',
			sessionNo: 29,
			speakerRole: 1,
			content: '我去找你了',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:03'
		},
		{
			id: '1882009188190583271',
			callId: '20250603133826996393400471',
			sessionNo: 28,
			speakerRole: 2,
			content: '这是你的个人',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:06'
		},
		{
			id: '1882009188190583274',
			callId: '20250603133826996393400471',
			sessionNo: 32,
			speakerRole: 1,
			content: '他这个文明说我有钱不是玩',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:09'
		},
		{
			id: '1882009188190583275',
			callId: '20250603133826996393400471',
			sessionNo: 29,
			speakerRole: 2,
			content: '你是这是你的个人选择',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:12'
		},
		{
			id: '1882009188190583278',
			callId: '20250603133826996393400471',
			sessionNo: 33,
			speakerRole: 1,
			content: '我已经是说是这个样子了对我的是的啊',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:16'
		},
		{
			id: '1882009188190583279',
			callId: '20250603133826996393400471',
			sessionNo: 30,
			speakerRole: 2,
			content: '你个海偷我在老家的',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:19'
		},
		{
			id: '1882009188190583281',
			callId: '20250603133826996393400471',
			sessionNo: 32,
			speakerRole: 2,
			content: '普通人员的对不对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:23'
		},
		{
			id: '1882009188190583282',
			callId: '20250603133826996393400471',
			sessionNo: 35,
			speakerRole: 1,
			content: '你上班我不会上补什么',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:24'
		},
		{
			id: '1882009188190583285',
			callId: '20250603133826996393400471',
			sessionNo: 33,
			speakerRole: 2,
			content: '主动违约的对吧',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:28'
		},
		{
			id: '1882009188190583288',
			callId: '20250603133826996393400471',
			sessionNo: 36,
			speakerRole: 1,
			content: '我已经',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:31'
		},
		{
			id: '1882009188190583290n',
			callId: '20250603133826996393400471',
			sessionNo: 34,
			speakerRole: 2,
			content: '王书杰',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:33'
		},
		{
			id: '1882009188190583291n',
			callId: '20250603133826996393400471',
			sessionNo: 37,
			speakerRole: 1,
			content: '再跟你说话你问我这么多',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:33'
		},
		{
			id: '1882009188190583293n',
			callId: '20250603133826996393400471',
			sessionNo: 38,
			speakerRole: 1,
			content: '我知道不是你',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:36'
		},
		{
			id: '1882009188190583295n',
			callId: '20250603133826996393400471',
			sessionNo: 35,
			speakerRole: 2,
			content: '我问你一下别的事情啊女士你为什么不回答我的问题',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:38'
		},
		{
			id: '1882009188190583297n',
			callId: '20250603133826996393400471',
			sessionNo: 39,
			speakerRole: 1,
			content: '这个然后我们认识了我真不本人',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:42'
		},
		{
			id: '1882009188190583299n',
			callId: '20250603133826996393400471',
			sessionNo: 40,
			speakerRole: 1,
			content: '我没在你的我我问你我们视频我都去了解过',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:45'
		},
		{
			id: '1882009188190583300n',
			callId: '20250603133826996393400471',
			sessionNo: 41,
			speakerRole: 1,
			content: '可以下',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:46'
		},
		{
			id: '1882009188190583303n',
			callId: '20250603133826996393400471',
			sessionNo: 44,
			speakerRole: 1,
			content: '妈妈是手机',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:54'
		},
		{
			id: '1882009188190583304n',
			callId: '20250603133826996393400471',
			sessionNo: 39,
			speakerRole: 2,
			content: '怎么了',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:56'
		},
		{
			id: '1882009188190583305n',
			callId: '20250603133826996393400471',
			sessionNo: 45,
			speakerRole: 1,
			content: '我没查你过我没想跟你认识',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:41:57'
		},
		{
			id: '1882009188190583307n',
			callId: '20250603133826996393400471',
			sessionNo: 40,
			speakerRole: 2,
			content: '在调解是你们部',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:00'
		},
		{
			id: '1882009188190583310n',
			callId: '20250603133826996393400471',
			sessionNo: 42,
			speakerRole: 2,
			content: '你们吗小姐',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:03'
		},
		{
			id: '1882009188190583312n',
			callId: '20250603133826996393400471',
			sessionNo: 48,
			speakerRole: 1,
			content: '啊',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:06'
		},
		{
			id: '1882009188190583314n',
			callId: '20250603133826996393400471',
			sessionNo: 43,
			speakerRole: 2,
			content: '要是小姐的话就请你回答我的问题',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:09'
		},
		{
			id: '1882009188190583317n',
			callId: '20250603133826996393400471',
			sessionNo: 44,
			speakerRole: 2,
			content: '这个合同是不是你',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:11'
		},
		{
			id: '1882009188190583319n',
			callId: '20250603133826996393400471',
			sessionNo: 49,
			speakerRole: 1,
			content: '我们没法还100块钱我没有小姐我没有学子的',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:15'
		},
		{
			id: '1882009188190583321n',
			callId: '20250603133826996393400471',
			sessionNo: 47,
			speakerRole: 2,
			content: '你是不是主动违约的',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:18'
		},
		{
			id: '1882009188190583326n',
			callId: '20250603133826996393400471',
			sessionNo: 49,
			speakerRole: 2,
			content: '合同是不是你主动委单方面违约的这个',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:27'
		},
		{
			id: '1882009188190583328n',
			callId: '20250603133826996393400471',
			sessionNo: 50,
			speakerRole: 2,
			content: '你俩对不对',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:28'
		},
		{
			id: '1882009188190583332n',
			callId: '20250603133826996393400471',
			sessionNo: 55,
			speakerRole: 1,
			content: '给我滚',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:32'
		},
		{
			id: '1882009188190583338n',
			callId: '20250603133826996393400471',
			sessionNo: 56,
			speakerRole: 2,
			content: '找一些这个合同你不是被',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:40'
		},
		{
			id: '1882009188190583340n',
			callId: '20250603133826996393400471',
			sessionNo: 57,
			speakerRole: 2,
			content: '回来的在家',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:42'
		},
		{
			id: '1882009188190583343n',
			callId: '20250603133826996393400471',
			sessionNo: 58,
			speakerRole: 2,
			content: '不是啊',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:45'
		},
		{
			id: '1882009188190583345n',
			callId: '20250603133826996393400471',
			sessionNo: 59,
			speakerRole: 2,
			content: '还没有条件呢',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:48'
		},
		{
			id: '1882009188190583353n',
			callId: '20250603133826996393400471',
			sessionNo: 61,
			speakerRole: 2,
			content: '不要说只要你回答我你的案子不要说你的慢心',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:58'
		},
		{
			id: '1882009188190583354n',
			callId: '20250603133826996393400471',
			sessionNo: 62,
			speakerRole: 2,
			content: '那里',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:42:59'
		},
		{
			id: '1882009188190583355n',
			callId: '20250603133826996393400471',
			sessionNo: 63,
			speakerRole: 2,
			content: '我在那边',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:01'
		},
		{
			id: '1882009188190583359n',
			callId: '20250603133826996393400471',
			sessionNo: 64,
			speakerRole: 2,
			content: '你是不要说你们那里',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:06'
		},
		{
			id: '1882009188190583363n',
			callId: '20250603133826996393400471',
			sessionNo: 66,
			speakerRole: 2,
			content: '我在打工',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:09'
		},
		{
			id: '1882009188190583364n',
			callId: '20250603133826996393400471',
			sessionNo: 67,
			speakerRole: 2,
			content: '你打字音',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:11'
		},
		{
			id: '1882009188190583365n',
			callId: '20250603133826996393400471',
			sessionNo: 68,
			speakerRole: 2,
			content: '你傻架明白吗',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:13'
		},
		{
			id: '1882009188190583370',
			callId: '20250603133826996393400471',
			sessionNo: 70,
			speakerRole: 2,
			content: '可能你还需要去一趟人家这个当地人民法起诉你的话',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:19'
		},
		{
			id: '1882009188190583372',
			callId: '20250603133826996393400471',
			sessionNo: 71,
			speakerRole: 2,
			content: '那你看完了',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:22'
		},
		{
			id: '1882009188190583376',
			callId: '20250603133826996393400471',
			sessionNo: 72,
			speakerRole: 2,
			content: '你们当地明白吗',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:26'
		},
		{
			id: '1882009188190583378',
			callId: '20250603133826996393400471',
			sessionNo: 70,
			speakerRole: 1,
			content: '我本一个没这在学校',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:28'
		},
		{
			id: '1882009188190583379',
			callId: '20250603133826996393400471',
			sessionNo: 73,
			speakerRole: 2,
			content: '你明白你其他老师不明白',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:30'
		},
		{
			id: '1882009188190583382',
			callId: '20250603133826996393400471',
			sessionNo: 75,
			speakerRole: 2,
			content: '谁都不要',
			extAgentId: '10238',
			chatTime: '2025-06-03 13:43:34'
		}
	]
	const callTypeMap = tool.dictList('CallType')
	// 模拟数据
	const currentUser = reactive({
		id: 1,
		name: '客服',
		avatar: new URL('@/assets/images/service_avatar.png', import.meta.url).href
	})
	const targetUser = reactive({
		id: 2,
		name: '客户',
		avatar: new URL('@/assets/images/customer_avatar.png', import.meta.url).href
	})

	const messages = ref([])
	const emit = defineEmits({ successful: null })
	const visible = ref(false)
	const isStop = ref(false)
	const callRecord = ref({
		fileUrl: null,
		callId: null,
		callee: null,
		callTypeName: null,
		deptName: null,
		agentNum: null,
		userName: null
	})
	const chatLoading = ref(false)
	const curMsgId = ref(null) //当前播放的消息id
	const chatWindowRef = ref(null)
	// ===========================================LIFECYCLE HOOKS===========================================
	// ===========================================METHODS==================================================
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		stopAudio()
		messages.value = []
		curMsgId.value = null
	}

	// 停止音频播放
	const stopAudio = () => {
		isStop.value = true
		setTimeout(() => {
			isStop.value = false
		}, 500)
	}
	//录音时间更新
	const handleTimeUpdate = (curTime) => {
		if (!messages.value.length) return
		// console.log('messages', messages.value)

		// 将当前时间转换为mm:ss格式用于比较
		const minutes = Math.floor(curTime / 60000)
		const seconds = Math.floor((curTime % 60000) / 1000)
		const currentTimeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
		// 找到当前时间对应的消息
		let foundMessage = null
		for (let i = 0; i < messages.value.length; i++) {
			// 比较时间字符串，找到小于等于当前播放时间的最新消息
			if (messages.value[i].timeOffset <= currentTimeString) {
				foundMessage = messages.value[i]
			} else {
				// 如果找到了大于当前时间的消息，说明前一条是我们要找的
				break
			}
		}
		// console.log('foundMessage', foundMessage)

		// 如果找到了对应消息，设置当前消息ID
		if (foundMessage) {
			// 只有当ID变化时才更新，避免不必要的重渲染
			if (curMsgId.value !== foundMessage.id) {
				curMsgId.value = foundMessage.id
				// 滚动到当前消息
				if (chatWindowRef.value) {
					chatWindowRef.value.scrollToMessage(foundMessage.id)
				}
			}
		}
	}
	// ===========================================REQUEST==================================================
	// 打开抽屉
	const onOpen = (record) => {
		chatLoading.value = true
		console.log('rrr', record)
		record.callTypeName = record.callType ? callTypeMap.find((item) => item.value == record.callType).label : null
		callRecord.value = record
		visible.value = true
		//查询语音文本
		voiceTextApi
			.getTextByCallId(record.callId)
			.then((res) => {
				chatLoading.value = false
				//仿微信聊天记录
				messages.value = []
				// 计算对话的起始和结束时间
				// const startTime = new Date(testData[0].chatTime).getTime()
				// testData.forEach((item) => {
				// 	// 计算当前消息相对于起始时间的偏移（毫秒）
				// 	const messageTime = new Date(item.chatTime).getTime()
				// 	const offsetMs = messageTime - startTime

				// 	// 转换为mm:ss格式
				// 	const minutes = Math.floor(offsetMs / 60000)
				// 	const seconds = Math.floor((offsetMs % 60000) / 1000)
				// 	const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
				// 	messages.value.push({
				// 		id: item.id,
				// 		content: item.content,
				// 		timestamp: item.chatTime,
				// 		isSelf: item.speakerRole === 2,
				// 		timeOffset: timeString
				// 	})
				// })
				const startTime = new Date(res[0].chatTime).getTime()
				// 把res转化成messages
				res.forEach((item) => {
					// 计算当前消息相对于起始时间的偏移（毫秒）
					const messageTime = new Date(item.chatTime).getTime()
					const offsetMs = messageTime - startTime

					// 转换为mm:ss格式
					const minutes = Math.floor(offsetMs / 60000)
					const seconds = Math.floor((offsetMs % 60000) / 1000)
					const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
					messages.value.push({
						id: item.id,
						content: item.content,
						timestamp: item.chatTime,
						isSelf: item.speakerRole === 2,
						timeOffset: timeString
					})
				})
			})
			.catch((err) => {
				chatLoading.value = false
			})
	}
	// ===========================================OTHERS==================================================
	// 暴露方法供父组件调用
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
	.call-autio {
		border-bottom: 1px solid #e6e6e6;
	}
	.call-info {
		height: 140px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;
		> div:nth-child(2) {
			flex: 1;
			margin-left: 10px;
		}
		:deep(.ant-card) {
			display: flex;
			flex-direction: column;
			height: 100%;
			.ant-card-head {
				padding: 0px 10px;
				border-bottom: 1px solid #f0f0f0 !important;
				min-height: 40px !important;
				.ant-card-head-title {
					padding: 0 !important;
				}
			}
			.ant-card-body {
				padding: 8px 10px;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				.empty-remark {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.icon-queshengye_zanwushuju {
						font-size: 32px;
					}
					span {
						font-size: 10px;
						color: #999;
					}
				}
			}
		}

		:deep(.des-details) {
			.ant-descriptions-view {
				.ant-descriptions-item-content {
					span {
						display: inline-block;
						width: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}
	}
	.call-chat {
		height: calc(100vh - 400px);
	}
</style>
